<template>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line
      x1="0"
      y1="10"
      :x2="param.width"
      y2="10"
      :stroke="param.borderColor"
      :stroke-width="param.borderWidth"
      />
      <line
        class="my-flow-line"
        x1="10"
        :y1="flowY"
        :x2="param.width - 10"
        :y2="flowY"
        :stroke="param.flowColor"
        :stroke-width="param.flowWidth"
      />
    <line
      x1="0"
      :y1="param.height + 10 - param.borderWidth"
      :x2="param.width"
      :y2="param.height + 10 - param.borderWidth"
      :stroke="param.borderColor"
      :stroke-width="param.borderWidth"
      />
  </svg>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, ref, toRefs, watch } from 'vue';
import { CVariableDataItem, CGraphEntity, CDynamicDataItem, CDataNode } from 'stores/editorModels';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';
import { CAnimationPropertyItem } from 'components/views/animation/animationViewModel';
import { getPropValue } from 'src/util/utils'
import { setCssVar } from 'quasar'

export default defineComponent({
  name: 'ViewAnimationFlow',
  props: {
    detail: {
      type: Object,
      default: {} as CGraphEntity
    },
    dynamicData: {
      type: Array as PropType<CVariableDataItem[]>,
      default: () => {
        return [] as CVariableDataItem[]
      }
    }
  },

  setup (props, context) {
    // 响应数据解构
    const {
      detail,
      dynamicData
    } = toRefs(props);

    //错误通知
    const {
      showMessage
    } = useMessageNotify();

    let flowY = ref(0);

    //响应数据
    let param = ref<CAnimationPropertyItem>({
      borderColor: '#000000',
      borderWidth: 10,
      flowColor: '#e8c406',
      flowWidth: 20,
      speed: '15s',
      width: 0,
      height: 0
    });

    //数据部分
    let xyData = ref<CDynamicDataItem[]>([]);

    //动画播放判断
    const startAnimation = () => {

    }

    let animationSpeed = ref('15s')

    //属性更新
    const configProperty = () => {
      //生成配置属性
      if ((detail.value?.propsItem) &&
        (detail.value?.propsItem.length > 0)) {
        let i = 0;
        let num1, num2, num3, num4, num5;
        param.value.borderColor = getPropValue('borderColor', detail.value.propsItem);
        num1 = parseInt(getPropValue('borderWidth', detail.value.propsItem));
        param.value.flowColor = getPropValue('flowColor', detail.value.propsItem);
        num2 = parseInt(getPropValue('flowWidth', detail.value.propsItem));
        num3 = parseInt(getPropValue('height', detail.value.propsItem))   
        num4 = parseInt(getPropValue('width', detail.value.propsItem)) 
        num5 = parseInt(getPropValue('speed', detail.value.propsItem)) 
        if (!isNaN(num1) || !isNaN(num2) || !isNaN(num3) || !isNaN(num4) || !isNaN(num5)) {
          param.value.borderWidth = num1;
          param.value.flowWidth = num2;
          param.value.height = num3;
          param.value.width = num4;
          flowY.value = (param.value.height / 2 - param.value.borderWidth) + 11;
          param.value.speed = num5 + 's'
          animationSpeed.value = num5 + 's'
        }
      } else {
        showMessage('AnimationFlow 属性设定值不符！');
        return;
      }

      //生成数据节点
      if ((detail.value?.dataItem) && (detail.value?.dataItem.length > 0)) {
        xyData.value.length = 0;
        detail.value.dataItem.forEach((item: CDataNode) => {
          xyData.value.push({
            vid: item.variableValue,
            name: item.nodeValue,
            value: 0
          });
        });
      }

      //动画播放
      startAnimation();
    }

    //更新数据
    const refreshDynamicData = () => {
      //动态数据
      if ((dynamicData.value) && (dynamicData.value.length > 0)) {
        dynamicData.value.forEach((el, index) => {
          if (xyData.value[index].vid === el.varId) {
            xyData.value[index].value = el.vData;
          }
        });
      }
    }

    //初始化
    const init = () => {
      configProperty();
      refreshDynamicData();
    }

    //监视属性变化
    watch(() => detail, () => {
      configProperty();
    }, { deep: true });

    //监视变量变化
    watch(() => dynamicData, () => {
      refreshDynamicData();
    }, { deep: true })

    //挂载组件
    onMounted(() => {
      init();
    });


    return {
      detail,
      flowY,
      animationSpeed,
      param
    };
  }
});
</script>

<style lang="scss" scoped>
.my-flow-line {
  @keyframes animation-dash {
    to {
      stroke-dashoffset: -1000;
    }
  }
  stroke-dasharray: 30, 10;
  animation: animation-dash v-bind(animationSpeed) linear infinite

}

</style>
